/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="未付款订单">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main" id="empty_content">
      <!-- <mescroll-vue
        ref="mescroll"
        :down="mescrollDown"
        @init="mescrollInit"
      >-->
      <div ref="mescroll" class="mescroll">
      <Divider v-if="list && list.length === 0">您暂时没有未付款订单</Divider>
        <ul class="empty-middle" id="dataList">
          <li v-for="(item,index) in list" :key="index" @click="goDetail(item.id)">
            <p class="header">
              <span class="num">订单编号: {{item.orderId}}</span>
              <span class="time">{{item.createTime}}</span>
            </p>
            <div class="top">
              <div class="left">
                <img :src="item.litpic" alt>
              </div>
              <div class="right">
                <p class="title">{{item.relName}}</p>
                <div class="info_box">
                  <b class="type">
                    过期时间:
                    <span>{{item.expireTime}}</span>
                  </b>
                  <b class="status">{{item.status | getCN}}</b>
                </div>
              </div>
            </div>
            <div class="bottom">
              <p class="left">
                {{item.status === 1 ? "价格" : "应付金额"}}:
                <span>¥{{item.amount}}</span>
              </p>
              <p class="right">
                <span class="btn del" v-if="item.status !== 1" @click.stop="delOrder(item.orderId)">删除</span>
                <span
                  class="btn pay"
                  v-if="item.status === 0"
                  @click.stop="goRadyPay(item.orderId)"
                >立即支付</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- </mescroll-vue> -->
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
// import MescrollVue from "mescroll.js/mescroll.vue";
import MeScroll from "mescroll.js";
import moment from "moment";
import { Tab, TabItem } from "vux";
import { getOrderList, delOrder } from "../../api/index.js";

export default {
  data() {
    return {
      list: [],
      mescroll: null,
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        empty: {
          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
          warpId: this.$refs.mescroll, // 父布局的id;
          // warpId: 'empty_content',
          tip: "暂无相关数据~" // 提示
        }
      }
    };
  },
  mounted() {
    // this.mescroll.triggerDownScroll();
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      }
    });
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    goDetail(data) {
      this.$router.push({ path: "/taochangDetail", query: { cid: data } });
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    gowechartpay(data) {
      this.$router.push({ path: "/wechartpay", query: { orderId: data } });
    },
    goRadyPay(data) {
      this.$router.push({ path: "/readyPay", query: { orderId: data } });
    },
    // 下拉刷新
    async downCallback(mescroll) {
      let p = JSON.parse(localStorage.getItem("selectedProject"));
      const result = await getOrderList();
      if (result.code === 1) {
        this.list = result.data;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    async delOrder(data) {
      let self = this;
      this.$vux.confirm.show({
        title: "确定删除此订单?",
        // 组件除show外的属性
        onCancel() {
          console.log("取消");
        },
        async onConfirm() {
          const result = await delOrder({ orderId: data });
          if (result.code === 1) {
            self.$vux.toast.show(`删除订单成功!`);
            self.mescroll.triggerDownScroll();
          } else {
            self.$vux.toast.show(`删除订单失败:${result.msg}`);
          }
        }
      });
    }
  },
  components: { Header, Tab, TabItem }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";
.header_middle {
  padding: 2px 10% 0;
  position: relative;
  box-sizing: border-box;
}

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    ul {
      box-sizing: border-box;
      width: 100%;
      li {
        padding: 0 10px;
        box-sizing: border-box;
        background: @white;
        margin-bottom: 15px;
        .top {
          border-bottom: 1px solid @border-base;
          .mix-flex-center();
          height: 90px;
          position: relative;
          box-sizing: border-box;
          padding: 10px 0;
          .left {
            height: 100%;
            flex: 3;

            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              overflow: hidden;
            }
          }
          .right {
            width: 100%;
            height: 100%;
            flex: 7;
            padding-left: 10px;
            position: relative;
            .title {
            }
            .info_box {
              position: absolute;
              bottom: 0;
              width: 100%;
              .type {
                font-size: 13px;
                color: @font-secondary;
                span {
                  color: red;
                }
              }
              .status {
                position: absolute;
                right: 10px;
                top: 0;
                font-size: 10px;
                border: 1px solid @primary;
                color: @primary;
                padding: 0 3px;
                border-radius: 3px;
              }
            }
          }
        }
        .bottom,
        .header {
          line-height: 30px;
          font-size: 12px;
          text-align: left;
          color: @font-secondary;
          .mix-flex-center();
        }
        .bottom {
          padding: 10px 0;
          p {
            flex: 1;
          }
          .left {
            font-size: 14px;
            span {
              color: red;
            }
          }
          .right {
            text-align: right;
            .btn {
              display: inline-block;
              height: 26px;
              line-height: 26px;
              width: 60px;
              border-radius: 26px;
              text-align: center;
              margin-right: 6px;
            }
            .del {
              background: @red-bg;
              color: @red;
            }
            .pay {
              background: @red;
              color: @white;
            }
          }
        }

        .header {
          span {
            flex: 1;
            white-space: nowrap;
          }
          .num {
          }
          .time {
            text-align: right;
            margin-right: 6px;
          }
        }
      }
    }
  }
}
</style>
